<template>
  <div>
    <el-dialog
      v-loading="loading"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="订单详情"
      fullscreen
      center
      @close="close"
    >
      <el-collapse-transition>
        <div v-if="!isShowRefundDetail">
          <div v-if="detail" ref="wxaMallOrderDetail" class="content-container">
            <!-- 操作按钮 -->

            <div class="handle-btn-container flexREC no-print">
              <el-button
                v-if="
                  detail.subStatus !== 'CANCEL' &&
                    detail.subStatus !== 'WAITING'
                "
                type="text"
                icon="el-icon-printer"
                @click="putSealTicket(detail.orderNo)"
              >打印小票
              </el-button>
              <el-button
                type="text"
                icon="el-icon-printer"
                @click="print"
              >订单打印
              </el-button>

              <el-button
                v-if="
                  detail.subStatus !== 'FINISH' && detail.subStatus !== 'CANCEL'
                "
                type="text"
                icon="el-icon-edit-outline"
                @click="openDialogRemark"
              >订单备注
              </el-button>
              <!-- <el-button
                v-if="detail.orderStatus=='WAITING'"
                type="text"
                icon="el-icon-truck"2
                @click="openDialogPrice"
              >订单改价</el-button>-->
              <el-button
                v-if="
                  detail.subStatus === 'WAIT_DELIVERY' &&
                    detail.type === 'SELF_PICKUP'
                "
                type="text"
                icon="el-icon-sold-out"
                @click="openDialogPick"
              >订单提货
              </el-button>
              <el-button
                v-if="
                  detail.subStatus === 'WAIT_DELIVERY' &&
                    (detail.type === 'EXPRESS' || detail.type === 'LOCAL')
                "
                type="text"
                icon="el-icon-truck"
                @click="openDialogDeliver"
              >订单发货
              </el-button>
              <el-button
                v-if="
                  detail.subStatus === 'DELIVERING' &&
                    (!detail.orderException || detail.orderException.status !== 0)
                "
                type="text"
                icon="el-icon-circle-close"
                class="app-text-color-primary"
                @click="openDialogConfirm"
              >订单完成
              </el-button>
              <el-button
                v-if="
                  detail.subStatus !== 'FINISH' &&
                    detail.subStatus !== 'CANCEL' &&
                    detail.subStatus !== 'WAITING'
                "
                type="text"
                icon="el-icon-circle-close"
                class="app-text-color-danger"
                @click="openDialogCancel"
              >订单取消
              </el-button>
              <!--v-if="detail.orderStatus==='FINISH'&&detail.refundFeeTotal!==detail.payInfo.payFee"-->
              <el-button
                v-if="refundBtnVis"
                type="text"
                icon="el-icon-bank-card"
                class="app-text-color-danger"
                @click="openDialogRefund"
              >订单退款
              </el-button>
            </div>

            <!-- 异常 -->
            <div v-if="detail.orderException">
              <div class="flexRSC error-tips-container">
                <ul type="danger" class="error-content">
                  <li>{{ detail.orderException.reason || "订单异常：" }}</li>
                  <li v-for="(item, index) in errorArr" :key="item.itemId">
                    {{ index + 1 }}.{{
                      item.itemTitle ? item.itemTitle + "：" : ""
                    }}
                    {{ item.remark }}
                  </li>
                </ul>
                <el-button
                  v-if="detail.orderException.status === 0"
                  type="danger"
                  round
                  size="mini"
                  @click="openDialogError"
                >异常处理
                </el-button>
                <el-tag
                  v-if="detail.orderException.status === 1"
                  type="success"
                  size="small"
                >已处理：{{
                  detail.orderException.remark || "无备注"
                }}</el-tag>
                <el-tag
                  v-if="detail.orderException.status === 2"
                  type="success"
                  size="small"
                >已忽略：{{
                  detail.orderException.remark || "无备注"
                }}</el-tag>
              </div>
            </div>

            <!-- 详情表格 -->
            <div class="order-info-container">
              <div class="cell-item">
                <div class="col col-3">
                  <div>订单编号</div>
                </div>
                <div class="col col-5">
                  <div>
                    <div>{{ detail.orderNo }}</div>
                    <div
                      v-if="detail.subType !== 'DEFAULT'"
                      style="font-weight: bold"
                    >
                      【{{ subTypeOptions[detail.subType]
                      }}{{
                        detail.activityNo ? "：" + detail.activityNo : ""
                      }}】
                    </div>
                  </div>
                </div>
                <div class="col col-3">
                  <div>下单时间</div>
                </div>
                <div class="col col-5">
                  <div>{{ detail.createTime }}</div>
                </div>
                <div class="col col-3">
                  <div>订单状态</div>
                </div>
                <div class="col col-5">
                  <div>
                    <!-- <el-tag
                  v-if="detail.orderStatus=='WAITING'||detail.orderStatus=='UNDERWAY'"
                  size="small"
                >{{statusOptions[detail.orderStatus]}}</el-tag>
                <el-tag
                  v-if="detail.orderStatus=='PAYED'||detail.orderStatus=='FINISH'"
                  type="success"
                  size="small"
                >{{statusOptions[detail.orderStatus]}}</el-tag>
                <el-tag
                  v-if="detail.orderStatus=='CANCEL'"
                  type="danger"
                  size="small"
                    >{{statusOptions[detail.orderStatus]}}</el-tag>-->
                    <el-tag
                      v-if="detail.subStatus === 'WAITING'"
                      type="danger"
                      size="small"
                    >待支付
                    </el-tag>
                    <el-tag v-if="detail.subStatus === 'PAYED'" size="small">
                      已支付
                    </el-tag>
                    <el-tag v-if="detail.subStatus === 'UNDERWAY'" size="small">
                      服务中
                    </el-tag>
                    <el-tag
                      v-if="detail.subStatus === 'WAIT_REMAINING'"
                      type="danger"
                    >待付尾款
                    </el-tag>
                    <el-tag
                      v-if="detail.subStatus === 'WAIT_DELIVERY'"
                      type="danger"
                    >
                      <span v-if="detail.type === 'EXPRESS'">待发货</span>
                      <span v-else-if="detail.type === 'LOCAL'">待配送</span>
                      <span
                        v-else-if="detail.type === 'SELF_PICKUP'"
                      >待提货</span>
                      <span v-else-if="detail.type === 'VIRTUAL'">待发放</span>
                      <span v-else>待发货</span>
                    </el-tag>
                    <el-tag
                      v-if="detail.subStatus === 'WAIT_GROUPING'"
                      type="danger"
                    >拼团中
                    </el-tag>
                    <el-tag
                      v-if="detail.subStatus === 'DELIVERING'"
                      type="danger"
                    >
                      <span v-if="detail.type === 'EXPRESS'">已发货</span>
                      <span v-else-if="detail.type === 'LOCAL'">配送中</span>
                      <span v-else-if="detail.type === 'VIRTUAL'">发放中</span>
                      <span v-else>已发货</span>
                    </el-tag>
                    <el-tag
                      v-if="detail.subStatus === 'FINISH'"
                      type="success"
                      size="small"
                    >已完成
                    </el-tag>
                    <span v-if="detail.subStatus === 'CANCEL'">
                      <el-tag type="danger" size="small">已取消 </el-tag>
                      <span class="mg-l-20" style="font-size: 13px">{{
                        detail.refundInfo.remark
                      }}</span>
                    </span>
                  </div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3">
                  <div>支付单号</div>
                </div>
                <div class="col col-5">
                  <div v-if="detail.subType === 'DEPOSIT_PRESELL'">
                    <div v-if="detail.orderPresell.depositPayNo">
                      {{ detail.orderPresell.depositPayNo }}（定金）
                    </div>
                    <div v-else>无</div>
                    <div v-if="detail.orderPresell.remainingPayNo">
                      {{ detail.orderPresell.remainingPayNo }}（尾款）
                    </div>
                  </div>
                  <div v-else>
                    {{ (detail.payInfo && detail.payInfo.paymentNo) || "无" }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>支付时间</div>
                </div>
                <div class="col col-5">
                  <div v-if="detail.subType === 'DEPOSIT_PRESELL'">
                    <div
                      v-if="
                        detail.orderPresell.depositStatus === 1 &&
                          detail.orderPresell.depositPayTime
                      "
                    >
                      {{ detail.orderPresell.depositPayTime }}（定金）
                    </div>
                    <div v-else>无</div>
                    <div
                      v-if="
                        detail.orderPresell.remainingStatus === 1 &&
                          detail.orderPresell.remainingPayTime
                      "
                    >
                      {{ detail.orderPresell.remainingPayTime }}（尾款）
                    </div>
                  </div>
                  <div v-else>
                    {{ (detail.payInfo && detail.payInfo.paymentTime) || "无" }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>下单顾客</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detail.memberName || detail.customerName || "无"
                    }}{{
                      detail.memberPhone ? "（" + detail.memberPhone + "）" : ""
                    }}
                  </div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3">
                  <div>下单店铺</div>
                </div>
                <div class="col col-5">
                  <div>{{ detail.storeName }}</div>
                </div>
                <div class="col col-3">
                  <div>完成时间</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{
                      detail.subStatus === "FINISH" ||
                        detail.subStatus == "CANCEL"
                        ? detail.updateTime
                        : "无"
                    }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>微信昵称</div>
                </div>
                <div class="col col-5">
                  <div>{{ detail.customerName || "无" }}</div>
                </div>
              </div>

              <!-- 自提 -->
              <div
                v-if="detail.type === 'SELF_PICKUP' && detail.delivery"
                class="cell-item"
              >
                <div class="col col-3">
                  <div>收货人</div>
                </div>
                <div class="col col-5">
                  <div
                    v-if="
                      detail.subType === 'GROUP' &&
                        detail.delivery.leaderCollect &&
                        !detail.groupInfo.isCreator
                    "
                  >
                    <el-link
                      type="primary"
                      @click="openLeaderCollectOrder()"
                    >团长代收</el-link>
                  </div>
                  <div v-else>
                    {{
                      detail.delivery.userName ||
                        detail.memberName ||
                        detail.customerName
                    }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>自提时间</div>
                </div>
                <div class="col col-5">
                  <div
                    v-if="
                      detail.subType === 'GROUP' &&
                        detail.delivery.leaderCollect &&
                        !detail.groupInfo.isCreator
                    "
                  >
                    <el-link
                      type="primary"
                      @click="openLeaderCollectOrder()"
                    >团长代收</el-link>
                  </div>
                  <div v-else>{{ detail.delivery.arrivalTime || "无" }}</div>
                </div>
                <div class="col col-3">
                  <div>预留电话</div>
                </div>
                <div class="col col-5">
                  <div
                    v-if="
                      detail.subType === 'GROUP' &&
                        detail.delivery.leaderCollect &&
                        !detail.groupInfo.isCreator
                    "
                  >
                    <el-link
                      type="primary"
                      @click="openLeaderCollectOrder()"
                    >团长代收</el-link>
                  </div>
                  <div v-else>{{ detail.delivery.phone || "无" }}</div>
                </div>
              </div>

              <!--快递  配送-->
              <div
                v-if="
                  (detail.type == 'EXPRESS' || detail.type == 'LOCAL') &&
                    detail.delivery
                "
                class="cell-item"
              >
                <div class="col col-3">
                  <div>收货人</div>
                </div>
                <div class="col col-5">
                  <div
                    v-if="
                      detail.subType === 'GROUP' &&
                        detail.delivery.leaderCollect &&
                        !detail.groupInfo.isCreator
                    "
                  >
                    <el-link
                      type="primary"
                      @click="openLeaderCollectOrder()"
                    >团长代收</el-link>
                  </div>
                  <div v-else>
                    {{ detail.delivery.userName }}（{{
                      detail.delivery.phone
                    }}）
                  </div>
                </div>
                <div class="col col-3">
                  <div>收货地址</div>
                </div>
                <div class="col col-13">
                  <div
                    v-if="
                      detail.subType === 'GROUP' &&
                        detail.delivery.leaderCollect &&
                        !detail.groupInfo.isCreator
                    "
                  >
                    <el-link
                      type="primary"
                      @click="openLeaderCollectOrder()"
                    >团长代收</el-link>
                  </div>
                  <div v-else>
                    {{
                      detail.delivery.province +
                        detail.delivery.city +
                        detail.delivery.country +
                        detail.delivery.street +
                        detail.delivery.detail
                    }}
                  </div>
                </div>
              </div>
              <div
                v-if="
                  (detail.type === 'EXPRESS' || detail.type === 'LOCAL') &&
                    detail.delivery
                "
                class="cell-item"
              >
                <div class="col col-3">
                  <div>物流单号</div>
                </div>
                <div class="col col-5">
                  <div>{{ detail.delivery.trackingNo || "无" }}</div>
                </div>
                <div class="col col-3">
                  <div>期望发货</div>
                </div>
                <div class="col col-5">
                  <div
                    v-if="
                      detail.subType === 'GROUP' &&
                        detail.delivery.leaderCollect &&
                        !detail.groupInfo.isCreator
                    "
                  >
                    <el-link
                      type="primary"
                      @click="openLeaderCollectOrder()"
                    >团长代收</el-link>
                  </div>
                  <div v-else>
                    {{ detail.delivery.arrivalTime || "尽快发货" }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>发货备注</div>
                </div>
                <div class="col col-5">
                  <div>{{ detail.delivery.remark || "无" }}</div>
                </div>
              </div>

              <div class="cell-item">
                <div class="col col-3">
                  <div>顾客备注</div>
                </div>
                <div class="col col-21">
                  <div>
                    {{
                      detail.bizData && detail.bizData.remark
                        ? detail.bizData.remark
                        : "无"
                    }}
                  </div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3">
                  <div>商家备注</div>
                </div>
                <div class="col col-21">
                  <div>{{ detail.remark || "无" }}</div>
                </div>
              </div>
              <div v-if="detail.subStatus == 'CANCEL'" class="cell-item">
                <div class="col col-3">
                  <div>取消备注</div>
                </div>
                <div class="col col-21">
                  <div>{{ detail.refundInfo.reason || "无" }}</div>
                </div>
              </div>
            </div>

            <!-- 商品内容跟支付 -->
            <div class="more-info-container">
              <div>
                <el-card>
                  <AppMainSubTitle title="商品明细：" />
                  <el-table
                    :data="detail.items"
                    style="width: 100%"
                    size="small"
                    border
                  >
                    <el-table-column prop="title" label="商品">
                      <template slot-scope="scope">
                        <ul>
                          <li class="common-column-box">
                            <div class="cover-img">
                              <img
                                v-if="scope.row.coverImg"
                                :src="fileBaseUrl + scope.row.coverImg"
                                alt
                                srcset
                              >
                            </div>
                            <div class="goods-title app-line-two">
                              <span
                                v-if="scope.row.goodsType === 101"
                                class="app-text-color-primary"
                              >【搭配】</span>{{ scope.row.title }}
                            </div>
                          </li>
                        </ul>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="skuInfo"
                      label="SKU"
                      width="150"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div style="text-align: center">
                          {{
                            scope.row.skuInfo
                              ? JSON.parse(scope.row.skuInfo).length > 0
                                ? JSON.parse(scope.row.skuInfo).join("、")
                                : "无"
                              : "无"
                          }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="单价/数量"
                      width="150"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div style="text-align: center">
                          ￥{{ scope.row.price / 100 }} x {{ scope.row.num }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!--团员信息-->
                  <template
                    v-if="
                      detail.subType === 'GROUP' &&
                        detail.groupInfo.collectList &&
                        detail.groupInfo.collectList.length
                    "
                  >
                    <AppMainSubTitle
                      title="团员订单代收商品："
                      style="margin-top: 20px"
                    />
                    <template v-for="groupItem in detail.groupInfo.collectList">
                      <div :key="groupItem.orderNo">
                        <el-link
                          type="primary"
                          style="margin: 10px 0"
                          @click="openLeaderCollectOrder(groupItem.orderNo)"
                        >{{
                          groupItem.userName +
                            " " +
                            groupItem.phone +
                            " 订单编号：" +
                            groupItem.orderNo
                        }}</el-link>
                        <div
                          class="app-text-color-primary"
                          style="margin-bottom: 10px"
                        >
                          顾客备注：{{ groupItem.remark || "无" }}
                        </div>
                        <el-table
                          :key="groupItem.orderNo"
                          :data="groupItem.items"
                          style="width: 100%"
                          size="small"
                          border
                        >
                          <el-table-column prop="title" label="商品">
                            <template slot-scope="scope">
                              <ul>
                                <li class="common-column-box">
                                  <div class="cover-img">
                                    <img
                                      v-if="scope.row.coverImg"
                                      :src="fileBaseUrl + scope.row.coverImg"
                                      alt
                                      srcset
                                    >
                                  </div>
                                  <div class="goods-title app-line-two">
                                    <span
                                      v-if="scope.row.goodsType === 101"
                                      class="app-text-color-primary"
                                    >【搭配】</span>{{ scope.row.title }}
                                  </div>
                                </li>
                              </ul>
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="skuInfo"
                            label="SKU"
                            width="150"
                            align="center"
                          >
                            <template slot-scope="scope">
                              <div style="text-align: center">
                                {{
                                  scope.row.skuInfo
                                    ? JSON.parse(scope.row.skuInfo).length > 0
                                      ? JSON.parse(scope.row.skuInfo).join("、")
                                      : "无"
                                    : "无"
                                }}
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="price"
                            label="单价/数量"
                            width="150"
                            align="center"
                          >
                            <template slot-scope="scope">
                              <div style="text-align: center">
                                ￥{{ scope.row.price / 100 }} x
                                {{ scope.row.num }}
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </template>
                  </template>
                </el-card>
                <el-card
                  v-if="
                    detail.subType === 'FULL_PRESELL' ||
                      detail.subType === 'DEPOSIT_PRESELL'
                  "
                >
                  <AppMainSubTitle title="预售条款：" />
                  <div class="pre-sell-tips-container">
                    <div class="title">预售下单和支付须知</div>
                    <div
                      v-for="v in detail.goodsPresellVo.prePayRuleTips"
                      :key="v"
                      class="tips"
                    >
                      <i class="el-icon-star-on" />&nbsp;{{ v }}
                    </div>
                    <div class="title">预售发货须知</div>
                    <div
                      v-for="v in detail.goodsPresellVo.prepareRuleTips"
                      :key="v"
                      class="tips"
                    >
                      <i class="el-icon-star-on" />&nbsp;{{ v }}
                    </div>
                    <div
                      v-if="detail.goodsPresellVo.prepareRuleTips.length === 0"
                      class="tips"
                    >
                      无
                    </div>
                    <div class="title">预售退款须知</div>
                    <div
                      v-for="v in detail.goodsPresellVo.cancelTips"
                      :key="v"
                      class="tips"
                    >
                      <i class="el-icon-star-on" />&nbsp;{{ v }}
                    </div>
                    <div
                      v-if="detail.goodsPresellVo.cancelTips.length === 0"
                      class="tips"
                    >
                      无
                    </div>
                    <div class="title">其它条款</div>
                    <div v-if="detail.goodsPresellVo.remark" class="tips">
                      <div
                        v-for="(
                          remarkItem, remarkIndex
                        ) in detail.goodsPresellVo.remark.split(/[(\r\n)\n]+/)"
                        :key="'remark_' + remarkIndex"
                      >
                        <i v-if="remarkItem" class="el-icon-star-on" />&nbsp;{{
                          remarkItem
                        }}
                      </div>
                    </div>
                    <div v-else class="tips">无</div>
                  </div>
                </el-card>
              </div>
              <div>
                <el-card>
                  <AppMainSubTitle title="支付明细：" />
                  <ul class="price-container">
                    <li v-for="(item, index) in detail.amounts" :key="index">
                      <div v-if="item.type === 'GOODS'" class="flexRBC">
                        <div>商品金额(合计)</div>
                        <div>￥{{ item.amount / 100 }}</div>
                      </div>
                      <div
                        v-if="item.type === 'DELIVERY' && item.amount"
                        class="flexRBC"
                      >
                        <div>运费</div>
                        <div>￥{{ item.amount / 100 }}</div>
                      </div>
                      <div
                        v-if="item.type === 'DISCOUNT' && item.amount"
                        class="flexRBC"
                      >
                        <div>{{ item.remark || "优惠" }}</div>
                        <div class="app-text-color-danger">
                          -￥{{ item.amount / 100 }}
                        </div>
                      </div>
                    </li>
                    <template v-if="detail.subType === 'DEPOSIT_PRESELL'">
                      <el-divider />
                      <li class="flexRBC">
                        <div style="font-weight: bold">订单应付定金金额：</div>
                        <div>
                          <span>￥ {{ detail.orderPresell.depositFee / 100 }}</span>
                          <span
                            v-if="detail.depositRefundFeeTotal"
                            class="app-text-color-danger"
                          >
                            （已退{{ detail.depositRefundFeeTotal / 100 }}）
                          </span>
                        </div>
                      </li>
                      <li
                        v-if="detail.orderPresell.depositStatus === 1"
                        class="flexCCE"
                      >
                        <div>
                          {{
                            detail.orderPresell.depositPayTime
                          }}&nbsp;&nbsp;已{{
                            paymentKeyOptions[
                              detail.orderPresell.depositPayment
                            ]
                          }}
                        </div>
                        <div
                          @click="
                            jumpIncomeRecord(detail.orderPresell.depositPayNo)
                          "
                        >
                          定金支付单号：
                          <el-link
                            :underline="false"
                            type="success"
                          ><u>{{
                            detail.orderPresell.depositPayNo
                          }}</u></el-link>
                        </div>
                      </li>
                      <li
                        v-if="detail.orderPresell.depositStatus === 0"
                        class="flexCCE app-text-color-danger"
                      >
                        待支付
                      </li>
                      <li class="flexRBC">
                        <div style="font-weight: bold">订单应付尾款金额：</div>
                        <div>
                          <span>￥
                            {{ detail.orderPresell.remainingFee / 100 }}</span>
                          <span
                            v-if="detail.refundFeeTotal"
                            class="app-text-color-danger"
                          >
                            （已退{{ detail.refundFeeTotal / 100 }}）
                          </span>
                        </div>
                      </li>
                      <li
                        v-if="detail.orderPresell.remainingStatus === 1"
                        class="flexCCE"
                      >
                        <div>
                          {{
                            detail.orderPresell.remainingPayTime
                          }}&nbsp;&nbsp;已{{
                            paymentKeyOptions[
                              detail.orderPresell.remainingPayment
                            ]
                          }}
                        </div>
                        <div
                          @click="
                            jumpIncomeRecord(detail.orderPresell.remainingPayNo)
                          "
                        >
                          尾款支付单号：
                          <el-link
                            :underline="false"
                            type="success"
                          ><u>{{
                            detail.orderPresell.remainingPayNo
                          }}</u></el-link>
                        </div>
                      </li>
                      <li
                        v-if="detail.orderPresell.remainingStatus === 0"
                        class="flexCCE app-text-color-danger"
                      >
                        待支付
                      </li>
                    </template>
                    <template
                      v-if="
                        detail.subType !== 'DEPOSIT_PRESELL' && detail.payInfo
                      "
                    >
                      <el-divider />
                      <li class="flexRBC">
                        <div style="font-weight: bold">订单应付金额：</div>
                        <div>
                          <span>￥ {{ detail.payInfo.payFee / 100 }}</span>
                          <span
                            v-if="detail.refundFeeTotal"
                            class="app-text-color-danger"
                          >
                            （已退{{ detail.refundFeeTotal / 100 }}）
                          </span>
                        </div>
                      </li>
                      <li
                        v-if="detail.payInfo.paymentStatus === 100"
                        class="flexCCE"
                      >
                        <div>
                          {{ detail.payInfo.paymentTime }}&nbsp;&nbsp;已{{
                            paymentKeyOptions[detail.payInfo.paymentMethod]
                          }}
                        </div>
                        <div
                          @click="jumpIncomeRecord(detail.payInfo.paymentNo)"
                        >
                          支付单号：
                          <el-link
                            :underline="false"
                            type="success"
                          ><u>{{ detail.payInfo.paymentNo }}</u></el-link>
                        </div>
                      </li>
                    </template>
                  </ul>
                </el-card>
                <!-- <el-card v-if="detail.refundRecord&&detail.refundRecord.length>0">
                  <AppMainSubTitle title="退款明细：" />
                  <el-table
                    :data="detail.refundRecord"
                    style="width: 100%"
                    size="small"
                    border
                  >
                    <el-table-column
                      prop="createTime"
                      label="申请时间"
                      align="center"
                    />
                    <el-table-column
                      prop="createTime"
                      label="退款金额/元"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div style="text-align:center">{{ scope.row.refundFee / 100 }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="refundStatus"
                      label="退款状态"
                      width="90"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div style="text-align:center">{{ refundStatusOptions[scope.row.refundStatus] }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="操作"
                      width="60"
                      class="no-print"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          size="small"
                          @click="openRefundRecordDetail(scope.row)"
                        >详情
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card> -->
              </div>
            </div>

            <!-- 退款列表 -->
            <el-card v-if="detail.subStatus == 'CANCEL'" class="refundList">
              <div class="head">
                <div class="left">
                  <div class="title">退款记录：</div>
                  <div class="refundAmt">
                    合计已退：{{ totalData.refundAmt }}元
                  </div>
                  <div class="refundIngAmt">
                    退款中：{{ totalData.refundIngAmt }}元
                  </div>
                </div>
                <div class="right">
                  <el-button
                    type="text"
                    @click="toggleRefundList(true)"
                  >全部展开</el-button>
                  <el-button
                    type="text"
                    @click="toggleRefundList(false)"
                  >全部收起</el-button>
                </div>
              </div>
              <el-table
                ref="dataTreeList"
                :data="refundList"
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <div class="expand">
                      <div class="expandLabel">
                        退款详情{{ scope.$index + 1 }}
                      </div>
                      <div class="expandVal">
                        <div
                          v-for="item of expandArr"
                          :key="item.key"
                          class="expandFormItem"
                        >
                          <span
                            class="expandFormLabel"
                          >{{ item.label }}：</span>
                          <span class="expandFormValue">{{
                            scope.row[item.key]
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="index" label="序号">
                  <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="发起退款时间" />
                <el-table-column prop="refundFee" label="退款金额/元" />
                <el-table-column prop="refundStatusZh" label="退款状态" />
                <el-table-column prop="operatorName" label="操作人" />
              </el-table>
            </el-card>

            <!-- 组件 -->
            <DialogRemark ref="dialogRemark" />
            <DialogError ref="dialogError" />
            <DialogError ref="dialogError" />
            <DialogPick ref="dialogPick" />
            <DialogDeliver ref="dialogDeliver" />
            <DialogPrice ref="dialogPrice" />
            <DialogRefund ref="dialogRefund" />
            <DialogCancel ref="dialogCancel" />
            <DialogConfirm ref="dialogConfirm" />
            <!--<DialogPayDetail ref="dialogPayDetail"/>-->
          </div>
        </div>
      </el-collapse-transition>

      <!-- 详情 -->
      <el-collapse-transition> 、 </el-collapse-transition>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  orderDetail,
  orderError,
  putSealTicket,
  qryRefundRecord
} from '@/views/wxaMallModule/api/order'
// import DialogPayDetail from '@/views/pay/income-record/components/DialogPayDetail'
import DialogRemark from './DialogRemark'
import DialogError from './DialogError'
import DialogPick from './DialogPick'
import DialogDeliver from './DialogDeliver'
import DialogPrice from './DialogPrice'
import DialogRefund from './DialogRefund'
import DialogCancel from './DialogCancel'
import DialogConfirm from './DialogConfirm'

export default {
  components: {
    DialogRemark,
    DialogError,
    DialogPick,
    DialogDeliver,
    DialogPrice,
    DialogRefund,
    DialogCancel,
    DialogConfirm
    // DialogPayDetail
  },
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      expandArr: [
        { label: '退款单号', key: 'refundNo' },
        { label: '三方单号', key: 'thirdOrderNo' },
        { label: '交易单号', key: 'orderNo' },

        { label: '业务', key: 'typeZh' },
        { label: '来源', key: 'sourceZh' },
        { label: '退款方式', key: 'refundMethodZh' },

        { label: '退款门店', key: 'shopName' },
        { label: '退款状态', key: 'refundStatusZh' },
        { label: '退款发起时间', key: 'createTime' },

        { label: '退款成功时间', key: 'updateTime' },
        { label: '退款备注', key: 'remark' },
        { label: '原订单金额/元', key: 'totalFee' },

        { label: '退款金额/元', key: 'refundFee' },
        { label: '退款人', key: 'memberName' },
        { label: '操作人', key: 'operatorName' },

        { label: '员工编号', key: 'operatorNo' }
      ],
      statusOptions: {
        WAITING: '待支付',
        PAYED: '已支付',
        UNDERWAY: '服务中',
        WAIT_REMAINING: '待付尾款',
        WAIT_DELIVERY: '待配送',
        FINISH: '已完成',
        CANCEL: '已取消'
      },
      subTypeOptions: {
        DEFAULT: '常规销售',
        DEPOSIT_PRESELL: '定金预售',
        FULL_PRESELL: '全款预售',
        PRESELL: '预售',
        SEC_KILL: '秒杀',
        GROUP: '拼团'
      },
      refundStatusOptions: {
        1: '退款成功',
        2: '退款失败',
        3: '退款中'
      },
      // 状态
      dialogVisible: null,
      loading: false,
      isShowRefundDetail: false,
      // 数据
      refundList: [],
      totalData: {},
      errorArr: [],
      detail: null,
      orderNo: ''
    }
  },
  computed: {
    refundBtnVis() {
      const {
        subStatus,
        refundFeeTotal,
        depositRefundFeeTotal,
        payInfo,
        canRefAmt
      } = this.detail
      if (
        subStatus === 'FINISH' &&
        payInfo &&
        refundFeeTotal + depositRefundFeeTotal !== payInfo.payFee
      ) {
        return true
      } else if (subStatus == 'CANCEL' && canRefAmt > 0) {
        return true
      } else {
        return false
      }
    },
    ...mapGetters(['fileBaseUrl', 'paymentKeyOptions'])
  },
  methods: {
    toggleRefundList(isExpansion) {
      this.refundList.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion)
      })
    },
    putSealTicket(orderNo) {
      putSealTicket({ orderNo }).then((res) => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '打印成功',
            type: 'success'
          })
        }
      })
    },
    /**
     * 弹框相关
     */
    open({ orderNo = '' }) {
      this.orderNo = orderNo
      this.fetchData()
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      if (this.$route.query.from === 'cancelTable' && this.$route.query.orderNo) return window.close()
      this.isShowRefundDetail = false
      this.detail = null
      this.loading = false
      this.errorArr = []
      this.resolve && this.resolve()
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    // hide() {
    //   this.resolve && this.resolve()
    //   this.resolve = null
    //   this.reject = null
    //   this.dialogVisible = false
    // },

    /**
     * 数据组
     */
    // 获取
    async fetchData() {
      this.loading = true
      await this.getDetail()
      await this.getError()
      await this.getRefundList()
      this.loading = false
    },
    getRefundList() {
      return new Promise((resolve, reject) => {
        // 已取消展示退款记录
        if (this.detail.subStatus == 'CANCEL') {
          qryRefundRecord({ orderNo: this.orderNo }).then((res) => {
            const { pageList, refundAmt, refundIngAmt, refundNum } = res.data
            this.refundList = pageList.list
            this.totalData = {
              refundAmt,
              refundIngAmt,
              refundNum
            }
            resolve()
          })
        } else {
          resolve()
        }
      })
    },
    // 获取详情
    getDetail() {
      return new Promise((resolve, reject) => {
        orderDetail({ orderNo: this.orderNo })
          .then((res) => {
            const params = res.data
            params.refundRecord = params.refundRecord || []
            let refundFeeTotal = 0
            let depositRefundFeeTotal = 0
            // 判断已退金额
            params.refundRecord.forEach((v) => {
              if (v.refundStatus === 1 || v.refundStatus === 2) {
                if (params.subType === 'DEPOSIT_PRESELL') {
                  if (params.orderPresell.depositOrderNo === v.orderNo) { depositRefundFeeTotal += v.refundFee }
                  if (params.orderPresell.remainingOrderNo === v.orderNo) { refundFeeTotal += v.refundFee }
                } else {
                  refundFeeTotal += v.refundFee
                }
              }
            })
            params.refundFeeTotal = refundFeeTotal
            params.depositRefundFeeTotal = depositRefundFeeTotal
            params.bizData = JSON.parse(res.data.bizData)
            // 预售条例拼接
            if (
              params.subType === 'FULL_PRESELL' ||
              params.subType === 'DEPOSIT_PRESELL'
            ) {
              const prePayRuleTips = []
              const prepareRuleTips = []
              // 预售
              params.goodsPresellVo.type === 'FULL' &&
                prePayRuleTips.push('预售下单需要支付全款')
              if (params.goodsPresellVo.type === 'DEPOSIT') {
                prePayRuleTips.push(
                  `预售下单需要支付定金${
                    params.orderPresell.depositFee / 100
                  }元`
                )
                prePayRuleTips.push(
                  `你需要在${params.orderPresell.remainingBeginTime}至${
                    params.orderPresell.remainingEndTime
                  }支付尾款${params.orderPresell.remainingFee / 100}元`
                )
              }
              // 退货
              params.goodsPresellVo.prePayRuleTips &&
                params.goodsPresellVo.cancelTips.push(
                  params.goodsPresellVo.prePayRuleTips
                )
              // if (params.goodsPresellVo.limitTime) {
              //   prePayRuleTips.push(`预售时间为：${params.goodsPresellVo.beginTime} ~ ${params.goodsPresellVo.endTime}`)
              // } else {
              //   prePayRuleTips.push('长期支持预售')
              // }
              // 发货
              const prepareUnitOptions = {
                MINUTES: '分钟',
                HOURS: '小时',
                DAYS: '天'
              }
              if (params.goodsPresellVo.prepareTime) {
                prepareRuleTips.push(
                  `支付全款${params.goodsPresellVo.prepareTime}${
                    prepareUnitOptions[params.goodsPresellVo.prepareUnit]
                  }后开始发货/自提`
                )
              } else if (params.goodsPresellVo.prepareBeginTime) {
                prepareRuleTips.push(
                  `支付全款${params.goodsPresellVo.prepareBeginTime}后开始发货/自提`
                )
              }
              params.goodsPresellVo.prePayRuleTips = prePayRuleTips
              params.goodsPresellVo.prepareRuleTips = prepareRuleTips
            }

            // 取消原因
            if (params.subStatus == 'CANCEL') {
              const refundRecord = params.refundRecord
              params.refundInfo = refundRecord.length
                ? refundRecord[refundRecord.length - 1]
                : {}
            } else {
              params.refundInfo = {}
            }
            this.detail = params
            console.log('获取详情', this.detailas)
          })
          .finally(() => {
            resolve()
          })
      })
    },

    // 获取异常
    getError() {
      return new Promise((resolve, reject) => {
        if (
          this.detail &&
          this.detail.orderException &&
          this.detail.orderException.status === 0
        ) {
          orderError({ orderNo: this.orderNo })
            .then((res) => {
              this.errorArr = res.data || []
            })
            .finally(() => {
              resolve()
            })
        } else {
          resolve()
        }
      })
    },

    /**
     * 按钮组
     */
    // 打印
    print() {
      this.$print(this.$refs.wxaMallOrderDetail)
    },

    // 备注
    openDialogRemark() {
      this.$refs.dialogRemark.open({ detail: this.detail }).then((res) => {
        this.fetchData()
      })
    },

    // 异常处理
    openDialogError() {
      this.$refs.dialogError
        .open({ detail: this.detail, errorArr: this.errorArr })
        .then((res) => {
          this.fetchData()
        })
    },

    // 订单取消
    openDialogCancel() {
      this.$refs.dialogCancel.open({ detail: this.detail }).then((res) => {
        this.fetchData()
      })
    },

    // 订单详情
    openDialogConfirm() {
      this.$refs.dialogConfirm.open({ detail: this.detail }).then((res) => {
        this.fetchData()
      })
    },

    // 订单提货
    openDialogPick() {
      this.$refs.dialogPick.open({ detail: this.detail }).then((res) => {
        this.fetchData()
      })
    },

    // 订单提货
    openDialogDeliver() {
      // 判断订单
      if (
        this.detail.subType === 'GROUP' &&
        this.detail.delivery.leaderCollect &&
        !this.detail.groupInfo.isCreator
      ) {
        this.openLeaderCollectOrder()
        return
      }
      this.$refs.dialogDeliver.open({ detail: this.detail }).then((res) => {
        this.fetchData()
      })
    },

    // 订单改价
    openDialogPrice() {
      this.$refs.dialogPrice.open({ detail: this.detail }).then((res) => {
        this.fetchData()
      })
    },

    // 订单退款
    openDialogRefund() {
      this.$refs.dialogRefund.open({ detail: this.detail }).then((res) => {
        this.fetchData()
      })
    },

    // 跳转详情
    openRefundRecordDetail(row) {
      this.isShowRefundDetail = true
      this.$refs.refundRecordDetail.fetchData(row.refundNo).then((res) => {
        this.isShowRefundDetail = false
      })
    },

    jumpIncomeRecord(payNo) {
      //    console.log('payNo--', payNo)
      //    const newUrl = this.$router.resolve({ name: 'PayIncomeRecord', query: { payNo } })
      // console.log('newUrl--', newUrl)
      //    window.open(newUrl.href, '_blank')
      // this.$router.push({ name: 'PayIncomeRecord', query: { payNo }})
    },

    // 打开团长详情
    openLeaderCollectOrder(orderNo = null) {
      const newUrl = this.$router.resolve({
        name: 'WxaMallOrderManage',
        query: { orderNo: orderNo || this.detail.groupInfo.creatorOrderNo }
      })
      window.open(newUrl.href, '_blank')
    }

    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 容器 */
.content-container {
  min-width: 1000px;
  max-width: 1300px;
  margin: 0 auto;
}

.order-info-container {
  margin-bottom: 20px;
}

.more-info-container {
  display: flex;

  > div {
    flex: 1;
    margin: 5px;
  }

  ::v-deep .el-card {
    margin-bottom: 10px;
  }
}

.expand {
  display: flex;
  .expandLabel {
    display: inline-block;
    width: 100px;
    font-weight: bold;
  }
  .expandVal {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .expandFormItem {
      width: 33%;
      display: flex;
      margin-bottom: 20px;
      .expandFormLabel {
        flex-shrink: 0;
      }
      .expandFormValue {
        flex: 1;
      }
    }
  }
}
/* 异常 */
.error-tips-container {
  margin: 10px 0;

  .error-content {
    margin-right: 10px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #409eff;
    border: 1px solid #d9ecff;
    border-radius: 4px;
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;

    li {
      margin-top: 5px;
    }
  }
}

/* 订单信息  */
.order-info-container {
  line-height: 24px;

  .cell-item {
    display: flex;
    border-left: 1px solid #e7e7e7;
    box-sizing: content-box;

    &:last-child {
      border-bottom: 1px solid #e7e7e7;
    }

    .col {
      display: flex;

      > div {
        flex: 1;
        padding: 10px;
        border-top: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
      }

      &:nth-child(odd) {
        div {
          text-align: center;
        }
      }
    }

    .col-3 {
      flex: 3;
    }

    .col-5 {
      flex: 5;
    }

    .col-13 {
      flex: 13;
    }

    .col-21 {
      flex: 21;
    }
  }
}
.refundList {
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      div {
        margin-right: 30px;
      }
      .title {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
/* 商品表格 */
.common-column-box {
  display: flex;
  align-items: center;
  padding: 10px 0;

  .cover-img {
    margin-right: 10px;
    flex: 0 0 50px;
    height: 50px;
    border: 1px solid #e7e7e7;
  }

  .goods-title {
    font-weight: bold;
    color: #000;
  }

  ::v-deep {
    th {
      text-align: left;
    }
  }
}

/* 预售条款 */
.pre-sell-tips-container {
  .title {
    margin: 10px 0;
    font-weight: bold;
  }

  .tips {
    margin: 6px 10px;
    flood-color: #606266;
    font-size: 14px;
  }
}

/* 价格管理 */
.price-container {
  li {
    padding: 5px 0;
  }
}
</style>
